<template>
  <div class="drop-select">
    <div class="drop-select-input" @click="clickInput">
      <el-input v-model="inputValue" :suffix-icon="openState ? iconTop : iconBottom"/>
    </div>
    <div class="drop-select-panel">
      <div v-for="item in data" :key="item.value" class="drop-select-panel-item" >
        <div class="drop-select-panel-item-left">{{ item.label }}</div>
        <div class="drop-select-panel-item-right" v-if="!item.state" @click.stop="downloadData(item)">
          <svg-icon :icon-class="getIcon(item.state)"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DropSelect',
  data() {
    return {
      inputValue: '',
      iconBottom: 'el-icon-caret-bottom',
      iconTop: 'el-icon-caret-top',
      openState: false,
      data: [
        { label: 'a', value: 'a', state: false },
        { label: 'b', value: 'b', state: true },
        { label: 'c', value: 'c', state: false }
      ]
    }
  },
  mounted() {
    document.addEventListener('click', this.overallClick)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.overallClick)
  },
  methods: {
    clickInput() {
      this.openState = true
    },
    overallClick() {
      this.openState = false
    },
    getIcon(state) {
      if (state === -1) {
        return 'textLoadStart'
      }
      if (state === 1) {
        return 'textLoading'
      }
      if (!state) {
        return 'textDownload'
      }
      return ''
    },
    downloadData(data) {
      console.log('1111111111111')
    }
  }
}
</script>

<style lang="scss" scoped>
.drop-select {
  width: 195px;
  position: relative;

  &-input {
    & /deep/ .el-input{

      .el-input__inner {
        height: 48px;
        background: #5E5E5E;
        border-radius: 4px;
        color: #fff;
        font-size: 15px;
        border: none !important;
      }

      & .el-input__icon {
        color: #fff;
      }
    }
  }

  &-panel {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    max-height: 320px;
    background: #444444;
    box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.09);
    border-radius: 4px;
    overflow-y: auto;

    &-item {
      width: 100%;
      height: 40px;
      font-size: 15px;
      color: #fff;
      background: #5e5e5e;
      padding: 0 16px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
